<template>
  <div class="tabs">
    <van-tabs :active="date" shrink @click-tab="onClickTab">
      <van-tab v-for="tab in tabs" :key="tab.date" :name="tab.date" :title="tab.text"></van-tab>
    </van-tabs>

    <van-cell-group>
      <van-cell v-for="item in schedules" :key="item.scheduleId" :title="item.showAt" />
    </van-cell-group>
  </div>
</template>

<script lang="ts" setup>
import type { Schedule } from '@/api/interface'
import { ref, computed } from 'vue'
import { formatDateHasPrefix } from '@/utils/common'

const props = defineProps<{
  date: number
  showDate: number[]
  schedules: Schedule.Item[]
}>()

const emit = defineEmits(['update:date'])

// const tabs: { text: string; date: number }[] = [{ text: '今天11月21日', date: 1700496000 }]
const tabs = computed(() => {
  return props.showDate.map((date) => {
    return {
      text: formatDateHasPrefix(date, 'MM月DD日'),
      date
    }
  })
})

function onChange(name: number) {
  console.log('=== onChange')

  emit('update:date', name)
}

function onClickTab(tab: { name: number; title: string }) {
  console.log('=== onClickTab')
  emit('update:date', tab.name)
}
</script>
